import React, {Component} from 'react';
import './storeDetail.scss';
import { Flex} from 'antd-mobile';
import {Link} from 'react-router-dom'
import Loading from '../../../component/loading/loading'

import axios from 'axios';
import Mock from 'mockjs'


const sote = {"data":[]};


Mock.mock('/ssb',{"data":[
        {"storePic":"http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg","name":"3D木门·全屋定制","address":"北京天安门"},
        {"storePic":"http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg","name":"3D木门·全屋定制","address":"北京天安门"},
        {"storePic":"http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg","name":"3D木门·全屋定制","address":"北京天安门"}
    ]
    }
);
Mock.mock('/ssb?广州市',{"data":[
        {"storePic":"http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg","name":"55132·全屋定制","address":"巴黎圣母院"},
        {"storePic":"http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg","name":"3456·全屋定制","address":"巴黎圣母院"},
        {"storePic":"http://pic1.sc.chinaz.com/files/pic/pic9/201804/zzpic11454.jpg","name":"88741·全屋定制","address":"巴黎圣母院"}
    ]
    }
);
Mock.mock('/sse', {
    "广东省": ["广州市", "韶关市"],
    "四川省": ["绵阳市", "成都"]

});

export class StoreDetail extends Component{
    constructor(props){
        super(props);
        this.state = {
            //storeList :{"storePic":"","name":"","address":""}
            storeList: sote.data,
            actprovince: "",
            actcity: "",
            thiscity: "",
            thisstory: [],
            province:[],
            loading :false,
            count:0
        }
    }

    componentWillMount(){
        axios.get('/ssb')
            .then(response=>{
                console.log(response.data.data.stores);
                if(response.data !==null){
                    this.setState({
                        storeList :response.data.data.stores,
                        loading: true
                    })
                }else {
                    console.log(response);
                }

            })

    }

    handleChange(name, e) {
        let actprovince = e.target.value;
        this.setState({
            actprovince : actprovince
        })
        axios.get(`/sse`)
            .then(res=>{
                let actcity = res.data[actprovince];
                this.setState({
                    actcity:actcity
                })
            })
    }

    handleChatOnClick = () => {
        this.setState({redirect: true});
    }

    onChangeCity=(name,e)=>{
        axios.get(`/ssb?${e.target.value}`)
            .then(res=>{
                this.setState({
                    storeList:res.data.data,
                    loading: true
                })
            })
    }

    render(){
        if (this.state.redirect) {
            return <Link to="http://p.qiao.baidu.com/cps/chat?siteId=11670398&userId=25091484" />; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 传递更多参数
        }
        return(
            <div className='storeDeCon'>
                <div className="flex-container">
                    <Flex justify="between">
                        <select className="form-control"
                                id="province1"
                                onChange={this.handleChange.bind(this, 'name')}
                        >
                            <option value='1'>省份</option>
                            <option value='广东省'>广东省</option>
                            <option value='四川省'>四川省</option>
                        </select>
                        <select className="form-control"
                                id="city1"
                                onChange={this.onChangeCity.bind(this, 'name')}
                        >
                            <option value="1">城市</option>
                            {this.state.actcity && this.state.actcity.map((item,key)=>
                                <option value={item} key={key}>{item}</option>
                            )}
                        </select>
                    </Flex>
                </div>
                {
                    !this.state.loading
                    ?<Loading></Loading>
                    :this.state.storeList && this.state.storeList.map( (item, key)=>
                    <div className='storeDetial' key={key}>
                        <div className='storesPic'>
                            <img src={item.storePic} alt="pic"/>
                        </div>
                        <div className='storesContent'>
                            <p>{item.name}</p>
                            <p>地址：{item.address}</p>
                            <div className='storesDetailButton'>
                                <Link to={{ pathname : '/baidumap' ,query :{address:item.address }}}>查看地图</Link>
                                <Link to="/chatonline">点击咨询</Link>
                            </div>
                        </div>
                    </div>
                    )
                }
            </div>
        )
    }

}